<template>
    <div class="item-size-choose" @touchmove.stop.prevent>
        <div
                :class="{
        mask: true,
        animated: true,
        fadeIn: !pageLeave,
        fadeOut: pageLeave
      }"
                @click="maskClick"
        ></div>
        <div
                :class="{
        'choose-panel': true,
        animated: true,
        slideInUp: !pageLeave,
        slideOutDown: pageLeave
      }"
                @click.stop
        >
            <div class="top-bar with-grey-bottom-border">
                <div class="title">确定结束本次服务嘛？</div>
            </div>
            <div class="bottom-btn">
                <button @click="clickHandle(3)" class="with-grey-bottom-border">结束对话</button>
                <button @click="clickHandle(2)" class="with-grey-bottom-border">保留对话，暂时退出</button>
                <button @click="clickHandle(1)" class="btn-primary with-grey-bottom-border">
                    取 消
                </button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                pageLeave: false
            };
        },
        methods: {
            maskClick() {
                this.pageLeave = true;
                setTimeout(() => {
                    this.$emit("panelClose", "");
                }, 400);
            },
            clickHandle(param) {
                this.$emit('clickHandle', param)
                this.maskClick()
            }
        },
        components: {},
        mounted() {
        }
    };
</script>

<style lang="less" scoped>
    .item-size-choose {
        z-index: 9999;
        position: relative;

        .mask {
            animation-duration: 0.4s;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 9999;
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.6);
        }

        .choose-panel {
            animation-duration: 0.4s;
            z-index: 10000;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background: rgba(255, 255, 255, 1);

            .top-bar {
                padding: 0 3.2%;
                width: 100%;
                left: 0;
                bottom: 10rem;
                text-align: center;
                height: 2rem;
                line-height: 2rem;

                .title {
                    color: rgba(68, 68, 68, 1);
                    font-size: 0.64rem;
                }
            }

            .bottom-btn {
                button {
                    width: 100%;
                    color: #444444;
                    font-size: 0.64rem;
                    background: rgba(255, 255, 255, 1);
                    border: none;
                    border-radius: 0.7rem;
                    height: 2rem;
                    line-height: 2rem;
                    border-radius: 0;
                }

                .btn-primary {
                    background-color: #0078FF;
                    color: #fff;
                }
            }
        }
    }
</style>
